<template>
    <div class="coupon-detail" v-if="is_show">
        <div id="coupon-detail" :class="detail_class">

            <!--S标题-->
            <h2>
                <span>卡券详情</span>
                <i
                        class="close iconfont icon-guanbi"
                        @click="$emit('close')"
                >
                </i>
            </h2>
            <!--E标题-->

            <!--S卡券内容-->
            <div id="content">
                <cube-scroll>

                    <!--S卡券封面-->
                    <div class="cover" v-if="data.coupon.cover">
                        <img v-lazy="data.coupon.cover" />
                    </div>
                    <!--E卡券封面-->

                    <!--S卡券名称-->
                    <h4 :class="data.coupon.cover ? '' : 'none-cover'">{{data.coupon.name}}</h4>
                    <!--E卡券名称-->

                    <!--S卡券状态-->
                    <cube-button :inline="true"
                                 v-if="data.status !== 1 || data.coupon.past"
                    >
                        <template v-if="data.status === 2">已核销</template>
                        <template v-else-if="data.coupon.past">已过期</template>
                    </cube-button>
                    <!--E卡券状态-->

                    <!--S类型-->
                    <p class="type" v-if="data.coupon.type !== 'qt'">
                        {{data.coupon.type_str}}：<span class="value">{{data.coupon.value}}</span>
                    </p>
                    <!--E类型-->

                    <!--S核销地址-->
                    <p class="address">
                        核销地址：{{data.coupon.address}}
                    </p>
                    <!--E核销地址-->

                    <!--S卡券时间-->
                    <p class="time">
                        <span v-if="data.indate !== 1">卡券有效期至</span>{{data.coupon.time_str}}
                    </p>
                    <!--E卡券时间-->

                    <!--S二维码-->
                    <div class="qrcode" v-if="data.status === 1 && !data.coupon.past">
                        <h6>扫一扫核销</h6>
                        <img :src="qrcode" />
                        <div class="refresh" v-if="show_refresh" @click="resetQrcode">
                            <div class="refresh-content">
                                <i class="iconfont icon-shuaxin"></i>
                                已失效，点击刷新二维码
                            </div>
                        </div>
                    </div>
                    <!--E二维码-->

                    <!--S卡券说明(核销规则)-->
                    <div class="explain">
                        <h5>说明(核销规则)：</h5>
                        <div class="content" v-html="data.coupon.detail"></div>
                    </div>
                    <!--E卡券详情(核销规则)-->

                </cube-scroll>
            </div>
            <!--E卡券内容-->

        </div>
    </div>
</template>

<script>
import Qrcode from "qrcode"
let QrcodeTimer = null
export default {
    name: "coupon-detail",
    data() {
      return {
          // id 编辑区域class，控制打开关闭的动画
          detail_class: "close",
          // 卡券数据
          data: {coupon:{}},
          // 核销二维码
          qrcode: '',
          // 是否显示刷新二维码区域
          show_refresh: false
      }
    },
    props: {
        // 是否显示
        is_show: {
            type: Boolean,
            default: false
        },
        // 用户卡券id
        member_coupon_id: {
            default: ''
        }
    },
    created() {
        clearInterval(QrcodeTimer)
    },
    destroyed() {
        clearInterval(QrcodeTimer)
    },
    mounted() {
        this.toggle()
        this.get()
            .then(() => {
                if(this.data.status === 1 && !this.data.coupon.past) {
                    this.resetQrcode()
                }
            })
    },
    methods: {
        /**
         * 显示隐藏区域
         */
        toggle() {
            if (this.is_show) {
                setTimeout(() => {
                    this.detail_class = 'open'
                }, 100)
            } else {
                this.detail_class = 'close'
                clearInterval(QrcodeTimer)
            }
        },
        /**
         * 获取卡券详情
         */
        get() {
            return this.$sendGet("member-coupon/" + this.member_coupon_id)
                .then((res) => {
                    this.data = res.data.data
                })
        },
        /**
         * 生成二维码
         */
        createQrcode() {
            this.show_refresh = false
            return this.$sendGet('member-coupon/check_url', {
                data: {
                    scan_type: 'check_coupon',
                    coupon_id: this.member_coupon_id
                }
            })
                .then((res) => {
                    Qrcode.toDataURL(res.data.data,{
                        margin: 0
                    },(err, url)=>{
                        this.qrcode = url
                    })
                })
        },
        resetQrcode() {
            this.createQrcode()
                .then(() => {
                    QrcodeTimer = setInterval(() => {
                        this.$sendGet('member-coupon/test_check_url',{
                            data: {
                                scan_type: 'check_coupon',
                                coupon_id: this.member_coupon_id
                            }
                        })
                            .then((res) => {
                                if(res.data.data === 0) {
                                    this.show_refresh = true
                                    clearInterval(QrcodeTimer)
                                } else {
                                    this.show_refresh = false
                                }
                            })
                    },1000)
                })
        }
    }
}
</script>

<style scoped lang="less" src="./coupon-detail.less"></style>
